<template>
  <div class="app-container table-app-container">
    <div class="fixed-table">
      <div class="fixed-table-actionbar">
        <TableFilter />
        <ActionBar />
      </div>
      <PageableTable
        :loading="loading"
        :data="insideTableData"
        :total="totalElements"
        :page="currentPage"
        :page-size="pageSize"
        :table-height="tableHeight"
        class="fixed-table-table"
        @page-change="onPageChange"
        @sort-change="onSortChange"
        @selection-change="onSelectionChange"
      >
        <el-table-column v-for="column in insideColumns" :key="column.key" :label="column.title" :prop="column.key" :sortable="column.sortable">
          <template slot-scope="scope">
            <column-render :render="column.render" :row="scope.row" :column="column" />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width">
          <template slot-scope="{row}">
            <el-button type="text" title="编辑" size="mini" icon="el-icon-edit" @click="edit(row.id)" />
            <el-button type="text" title="删除" size="mini" icon="el-icon-delete" @click="remove(row.id)" />
            <el-button type="text" title="查看" size="mini" icon="el-icon-view" @click="view(row.id)" />
          </template>
        </el-table-column>
      </PageableTable>

      <ViewDialog title="卡片详情" :show.sync="dialogViewVisible" width="70%" @on-cancel="onCloseViewDialog">
        <ViewForm :id="editId" />
      </ViewDialog>
      <FormDialog v-if="dialogFormVisible" title="编辑" :show.sync="dialogFormVisible" width="70%" @on-ok="ok" @on-cancel="onCloseEditDialog">
        <EditForm :id="editId" ref="editForm" />
      </FormDialog>
      <ViewDialog title="关联资产" :append-to-body="true" :show="assetDialogFormVisible" @on-cancel="assetDialogFormVisible = false">
        <AssetTable
          v-if="assetDialogFormVisible"
          ref="assets"
          belongs="sl"
          :for-selection="true"
          :original-code="curAssetCardCode"
          categories="1"
        />
      </ViewDialog>
    </div>
  </div>
</template>

<script>
// secondary package based on el-pagination
import FormDialog from '@neu/biz-core/components/FormDialog'
import ViewDialog from '@neu/biz-core/components/ViewDialog'
// 表格查询组件独立编写，需要传递pageable-table实例的mixin方法filter
import TableFilter from './components/tableFilter'
// 编辑实例组件独立编写，需要传递id属性，判断新建还是更新操作
import EditForm from './components/editForm'
import ViewForm from './components/viewForm'
import ActionBar from './components/actionBar'
import PageableTable from '@neu/biz-core/components/PageableTable'
import databind from '@neu/biz-core/mixins/databind'
import AssetTable from '@neu/dcam-ui/views/fixedAsset/tables'

import {
  page,
  remove
} from '@neu/dcam-ui/api/ahassetcard'
export default {
  name: 'AhAssetCardPage',
  components: {
    TableFilter,
    FormDialog,
    EditForm,
    ActionBar,
    PageableTable,
    ViewDialog,
    AssetTable,
    ViewForm
  },
  // 加入混入，使表格混入更多的api操作
  mixins: [databind],
  data() {
    return {
      r: page,
      d: remove,
      insideColumns: [
        { title: '卡片编号', key: 'code' },
        { title: '财管资产数量', key: 'amount' },
        { title: '实际资产数量', key: 'amountinfact' },
        { title: '备注', key: 'description' }
      ],
      dialogFormVisible: false,
      editId: -1,
      assetDialogFormVisible: false,
      curAssetCardCode: '',
      dialogViewVisible: false
    }
  },
  methods: {
    edit(id) {
      this.dialogFormVisible = true
      this.editId = id
    },
    ok() {
      this.$refs.editForm.save().then(response => {
        if (response === false) return
        this.$message({
          showClose: true,
          message: '操作成功！',
          type: 'success'
        })
        // 调用pageable-table实例的mixin方法refresh()，更新表格
        this.refresh()
        // 关闭对话框
        this.dialogFormVisible = false
      })
    },
    onCloseEditDialog() {
      this.editId = -1
      this.$refs.editForm.reset()
      // 关闭对话框
      this.dialogFormVisible = false
    },
    viewAssets(row) {
      this.assetDialogFormVisible = true
      this.curAssetCardCode = row.code
    },
    view(id) {
      // 打开对话框
      this.editId = id
      this.dialogViewVisible = true
    },
    onCloseViewDialog() {
      this.editId = -1
      this.dialogViewVisible = false
    }
  }
}
</script>
